<template>
	<div class="bg-white mt-[10px]">
		<div class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px]  px-[15px]"
			style="border-bottom: 1px solid #E4E4E4;">
			<div class="w-[25%]">用户名</div>
			<div class="w-[20%]">旗下流水</div>
			<div class="w-[20%]">总佣金</div>
			<div class="w-[25%]">未返佣金</div>
			<div class="w-[10%] text-center">操作</div>
		</div>
	</div>
	<div class="page-main overflow-y-auto" ref="scrollRef">
		<div class="bg-white px-[15px]">
			<scroll-list v-model:loading="state.loading" v-model:refresh="state.refresh" :finished="state.finished"
				:length="list.length" @load="load">
				<template v-for="(item, index) in list">
					<AgentRebateItem :item="item" :last="index >= list.length - 2" @more="onMore" />
				</template>
			</scroll-list>
		</div>
	</div>

	<van-popup round v-model:show="more.show" position="bottom" :close-on-click-overlay="true" >
		<div class=" py-[5px];">
			<ul>
				<li @click="handleDetail"
					class="h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4]">
					旗下详情
				</li>

				<li @click="handleAction"
					class="h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4]">
					一键返佣
				</li>
			</ul>
		</div>
	</van-popup>
	<AgentRebateDetailPopup ref="agentRebateDetailPopup" :ragent="more.actionItem" :date="searchParams.date">
	</AgentRebateDetailPopup>
</template>

<script setup lang="ts">
import { reqAgentRebateGrant, reqAgentRebateList } from '@/api/report'
import AgentRebateItem from './agent-rebate-item.vue';
import moment from "moment";


const more = ref({
	show: false,
	actionItem: {} as ReportAgentRebateMo
})
interface Params {
	Name?: string;
	StartDate?: string;
	EndDate?: string;
	date?: Date[]
}
const props = withDefaults(
	defineProps<{
		searchParams: Params;
	}>(),
	{
	}
);
import { useList } from "@/hooks/useList";
import { toast } from 'vue-sonner';
import AgentRebateDetailPopup from './agent-rebate-detail-popup.vue';

const agentRebateDetailPopup = ref()

const onMore = (item: ReportAgentRebateMo) => {
	more.value.show = true;
	more.value.actionItem = item;
}

// 发放/拒绝
const handleAction = () => {
	// 弹框操作
	more.value.show = false;
	showDialog({
		message: `是否进行【返佣】操作`
	}).then(async () => {
		try {
			await reqAgentRebateGrant(more.value.actionItem.UserId);
			toast.success("一键返佣成功");
			getData();
		} catch (error) {

		}
	});

};

const handleDetail = () => {
	more.value.show = false;
	agentRebateDetailPopup.value.open()
}

const getParams = () => {
	const params: Params = {}
	if (props.searchParams.Name) {
		params.Name = props.searchParams.Name
	}
	if (props.searchParams.date) {
		params.StartDate = moment(props.searchParams.date[0]).format("YYYY-MM-DD 00:00:00");
		params.EndDate = moment(props.searchParams.date[1]).format("YYYY-MM-DD 23:59:59");
	}
	return params
}
const { scrollRef, state, list, getData, search, load } = useList<ReportAgentRebateMo, Params>(
	reqAgentRebateList,
	getParams
);


watch(
	() => props.searchParams.date,
	() => {
		search()
	}, {
	deep: true
}
)

onMounted(() => {
	getData()
})

const handleSearch = () => {
	search()
}

defineExpose({
	handleSearch
})
</script>
